<template>
  <div v-if="crud.props.searchToggle">
    <!--    <el-date-picker
      v-model="query.createTime"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      class="date-item"
      value-format="yyyy-MM-dd HH:mm:ss" />-->
    <el-date-picker
      clearable
      v-model="query.createTime"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
      size="small"
      value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>
    <el-input v-model="query.productSn" clearable size="small" placeholder="产品条码" style="width: 200px;" />
    <el-input v-model="query.deviceCode" clearable size="small" placeholder="设备编号" style="width: 120px;"/>
    <!--    <el-input v-model="query.url" clearable size="small" placeholder="请求接口" style="width: 200px;" class="filter-item"/>-->
    <el-select
      v-model="query.url"
      slot="prepend"
      placeholder="请求接口"
      style="width: 150px"
      size="small"
    >
      <el-option
        v-for="item in dict.mes_interface"
        :key="item.id"
        :label="item.label"
        :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>
    <!--    <el-input v-model="query.lineCode" clearable size="small" placeholder="产线编号" style="width: 200px;" class="filter-item">-->
    <el-select
      v-model="query.lineCode"
      slot="prepend"
      placeholder="产线编号"
      style="width: 100px">
      <el-option
        v-for="item in dict.line_code"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      />
    </el-select>


    <el-input v-model="query.requestIp" clearable size="small" placeholder="请求IP" style="width: 150px;" />
    <el-input v-model="query.description" clearable size="small" placeholder="描述" style="width: 200px;" />
    <!--    <el-input v-model="query.method" clearable size="small" placeholder="请求方法" style="width: 200px;" class="filter-item"/>-->
    <el-input v-model="query.params" clearable size="small" placeholder="请求参数" style="width: 200px;" />
    <el-input v-model="query.resultStr" clearable size="small" placeholder="返回参数" style="width: 200px;" />
    <el-input v-model="query.username" clearable size="small" placeholder="用户名" style="width: 200px;" />

    <rrOperation />
  </div>
</template>

<script>
import { header } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import DateRangePicker from '@/components/DateRangePicker'
export default {
  dicts: ['line_code','mes_interface'],
  components: { rrOperation, DateRangePicker },
  mixins: [header()],
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近5分钟',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 1000 * 5);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近10分钟',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 1000 * 10);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近30分钟',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 1000 * 30);
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近1天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    };
  }
}
</script>
